<template>
  <div class="wordCloud"
      v-loading="loading"
      element-loading-text="正在生成词云 "
      element-loading-spinner="el-icon-loading"
  >
      <div class="sample_dis" v-show="loading===false">
          <img :src="starImg" alt="">
          <span>词云图</span>
          <p>通过词云的展示，可以直观的看到文本信息中出现较高频率的词语。如“环境”，“薄荷”，“广州”，“凤凰”，“超奶”等信息，我们可以推测出薄荷，炒奶是用户评论中出现频率较高的。</p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            starImg:require('../assets/05.jpg'),
            loading:true,
            
        }
    },
    created(){
        setTimeout(() => {
            this.loading = false
        }, 500);
    }
}
</script>

<style lang='scss' scoped>
.wordCloud{
    margin:75px 15px 15px 15px;
    height: calc(100vh - 150px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
    /deep/ .el-loading-mask{
        background-color:#fff !important;
    }
    .sample_dis{
        width:50%;
        display: flex;
        flex-direction:column;
        align-items: center;
        
        img{
            width: 80%;
        }
        span{
            color:#898989;
            font-size: 24px;
            line-height: 36px;
        }
       p{
            text-indent: 2em;
            line-height: 1.5;
            font-size:24px;
            padding-top:15px;
        }
    }
}
</style>